import React, { useState, useRef } from 'react';
import FileUpload from '@/components/FileUpload';
import {
    DatePicker,
    Form,
    Row,
    Col,
    Input,
    Select
} from 'antd';
import styles from './index.less'
import moment from 'moment';
const FormItem = Form.Item
import { MinusCircleOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';
const formItemLayout = {
    labelCol: { span: 20 },
    wrapperCol: { span: 20 },
};
const sexList = [
    { label: '男', value: '1' },
    { label: '女', value: '2' },
    { label: '_', value: '3' },
]
const sendTypeList = [
    { label: '自取', value: '1' },
    { label: '代发', value: '2' },
    { label: '包邮', value: '3' },
]

interface AddOrderProps { }
const AddOrder: React.FC<AddOrderProps> = ({ }) => {
    const selectAfter = (
        <Select defaultValue=".com" className="1" options={sendTypeList}>

        </Select>
    );
    return (
        <div className={styles.addOrder}>
            <div className={styles.header}>
                <div className={styles.title}>添加订单</div>
                <DatePicker
                    format="YYYY-MM-DD HH:mm:ss"
                    showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                    className={styles.selectTime}
                />
            </div>
            <div className={styles.formBox}>
                <div className={styles.leftForm}>
                    <div className={styles.infoBox}>

                    </div>
                    <div className={styles.submitForm}>
                        <Form
                            layout={'vertical'}
                            {...formItemLayout}
                            style={{ margin: '12px' }}
                        >
                            <Row align="middle" >
                                <Col span={10} offset={2}>
                                    <FormItem label="姓名" name="userName" rules={[{ required: true, message: '请输入姓名' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={10} offset={2} >
                                    <FormItem label="性别" name="sex" rules={[{ required: true, message: '请选择性别！' }]}>
                                        <Select style={{ width: '80%' }} placeholder="请选择" options={sexList} />
                                    </FormItem>
                                </Col>
                                <Col span={10} offset={2} >
                                    <Form.List name="projectFileList" initialValue={['']}>
                                        {(fields, { add, remove }) => (
                                            <>
                                                {fields.map((field, index) => (
                                                    <Form.Item
                                                        label={index === 0 ? '电话' : ''}
                                                        required={true}
                                                    >
                                                        <Form.Item
                                                            {...field}
                                                            validateTrigger={['onChange', 'onBlur']}
                                                            rules={[
                                                                {
                                                                    required: true,
                                                                    whitespace: true,
                                                                    message: "请输入电话",
                                                                },
                                                            ]}
                                                            noStyle
                                                        >
                                                            <Input placeholder="请输入" style={{ width: '80%' }} />
                                                            {index > 0 ? (
                                                                <MinusCircleOutlined
                                                                    className="dynamic-delete-button"
                                                                    onClick={() => remove(field.name)}
                                                                />
                                                            ) : null}
                                                            {index == 0 ? (
                                                                <PlusCircleOutlined
                                                                    className="dynamic-delete-button"
                                                                    onClick={() => add()}
                                                                />
                                                            ) : null}
                                                        </Form.Item>
                                                        {/* {fields.length > 1 ? (
                                                            <MinusCircleOutlined
                                                                className="dynamic-delete-button"
                                                                onClick={() => remove(field.name)}
                                                            />
                                                        ) : null}
                                                        {fields.length == 1 ? (
                                                            <PlusCircleOutlined
                                                                className="dynamic-delete-button"
                                                                onClick={() => add()}
                                                            />
                                                        ) : null} */}
                                                    </Form.Item>

                                                ))}
                                            </>
                                        )}
                                    </Form.List>
                                </Col>
                                <Col span={10} offset={2} >
                                    <Form.List name="fieldsPhoneList" initialValue={['']}>
                                        {(fieldsPhone, { add, remove }) => (
                                            <>
                                                {fieldsPhone.map((field, index) => (
                                                    <Form.Item
                                                        label={index === 0 ? '手机' : ''}
                                                        required={true}
                                                    >
                                                        <Form.Item
                                                            {...field}
                                                            validateTrigger={['onChange', 'onBlur']}
                                                            rules={[
                                                                {
                                                                    required: true,
                                                                    whitespace: true,
                                                                    message: "请输入手机",
                                                                },
                                                            ]}
                                                            noStyle
                                                        >
                                                            <Input placeholder="请输入" style={{ width: '80%' }} />
                                                            {index > 0 ? (
                                                                <MinusCircleOutlined
                                                                    className="dynamic-delete-button"
                                                                    onClick={() => remove(field.name)}
                                                                />
                                                            ) : null}
                                                            {index == 0 ? (
                                                                <PlusCircleOutlined
                                                                    className="dynamic-delete-button"
                                                                    onClick={() => add()}
                                                                />
                                                            ) : null}
                                                        </Form.Item>
                                                        {/* {fields.length > 1 ? (
                                                            <MinusCircleOutlined
                                                                className="dynamic-delete-button"
                                                                onClick={() => remove(field.name)}
                                                            />
                                                        ) : null}
                                                        {fields.length == 1 ? (
                                                            <PlusCircleOutlined
                                                                className="dynamic-delete-button"
                                                                onClick={() => add()}
                                                            />
                                                        ) : null} */}
                                                    </Form.Item>

                                                ))}
                                            </>
                                        )}
                                    </Form.List>
                                </Col>
                                <Col span={10} offset={2} >
                                    <Form.List name="WhatsappList" initialValue={['']}>
                                        {(fieldsPhone, { add, remove }) => (
                                            <>
                                                {fieldsPhone.map((field, index) => (
                                                    <Form.Item
                                                        label={index === 0 ? 'Whatsapp' : ''}
                                                        required={true}
                                                    >
                                                        <Form.Item
                                                            {...field}
                                                            validateTrigger={['onChange', 'onBlur']}
                                                            rules={[
                                                                {
                                                                    required: true,
                                                                    whitespace: true,
                                                                    message: "请输入Whatsapp",
                                                                },
                                                            ]}
                                                            noStyle
                                                        >
                                                            <Input placeholder="请输入" style={{ width: '80%' }} />
                                                            {index > 0 ? (
                                                                <MinusCircleOutlined
                                                                    className="dynamic-delete-button"
                                                                    onClick={() => remove(field.name)}
                                                                />
                                                            ) : null}
                                                            {index == 0 ? (
                                                                <PlusCircleOutlined
                                                                    className="dynamic-delete-button"
                                                                    onClick={() => add()}
                                                                />
                                                            ) : null}
                                                        </Form.Item>
                                                    </Form.Item>

                                                ))}
                                            </>
                                        )}
                                    </Form.List>
                                </Col>
                                <Col span={10} offset={2} >
                                    <Form.List name="emailList" initialValue={['']}>
                                        {(fieldsPhone, { add, remove }) => (
                                            <>
                                                {fieldsPhone.map((field, index) => (
                                                    <Form.Item
                                                        label={index === 0 ? '邮箱' : ''}
                                                        required={true}
                                                    >
                                                        <Form.Item
                                                            {...field}
                                                            validateTrigger={['onChange', 'onBlur']}
                                                            rules={[
                                                                {
                                                                    required: true,
                                                                    whitespace: true,
                                                                    message: "请输入邮箱",
                                                                },
                                                            ]}
                                                            noStyle
                                                        >
                                                            <Input placeholder="请输入" style={{ width: '80%' }} />
                                                            {index > 0 ? (
                                                                <MinusCircleOutlined
                                                                    className="dynamic-delete-button"
                                                                    onClick={() => remove(field.name)}
                                                                />
                                                            ) : null}
                                                            {index == 0 ? (
                                                                <PlusCircleOutlined
                                                                    className="dynamic-delete-button"
                                                                    onClick={() => add()}
                                                                />
                                                            ) : null}
                                                        </Form.Item>
                                                    </Form.Item>

                                                ))}
                                            </>
                                        )}
                                    </Form.List>
                                </Col>
                                <Col span={10} offset={2}>
                                    <FormItem label="国家" name="userName" rules={[{ required: true, message: '请输入国家' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={10} offset={2}>
                                    <FormItem label="市" name="userName" rules={[{ required: true, message: '请输入市' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={10} offset={2}>
                                    <FormItem label="州" name="userName" rules={[{ required: true, message: '请输入州' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={10} offset={2}>
                                    <FormItem label="邮编" name="userName" rules={[{ required: true, message: '请输入邮编' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={10} offset={2}>
                                    <FormItem label="公司名称" name="userName" rules={[{ required: true, message: '请输入公司名称' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={10} offset={2}>
                                    <FormItem label="收货地址" name="userName" rules={[{ required: true, message: '请输入收货地址' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                            </Row>

                        </Form>
                    </div>
                </div>
                <div className={styles.rightForm}>
                    <div className={styles.rightTopForm}>
                        <Form
                            layout={'vertical'}
                            {...formItemLayout}
                            style={{ margin: '12px' }}
                        >
                            <Row align="middle">
                                <Col span={6} offset={2}>
                                    <FormItem label="付款银行信息" name="userName" rules={[{ required: true, message: '请输入付款银行信息' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="付款账号" name="userName" rules={[{ required: true, message: '请输入付款账号' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="成交版型sku" name="userName" rules={[{ required: true, message: '请输入成交版型sku' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="成交量(kwp)" name="userName" rules={[{ required: true, message: '请输入成交量(kwp)' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="成交数量(pcs)" name="userName" rules={[{ required: true, message: '请输入成交数量(pcs)' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="托数(pallet)" name="userName" rules={[{ required: true, message: '请输入托数(pallet)' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="税率(%)" name="userName" rules={[{ required: true, message: '请输入税率(%)' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="成交额(EUR)" name="userName" rules={[{ required: true, message: '请输入成交额(EUR)' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="优惠Coupon" name="userName" rules={[{ required: true, message: '请输入优惠Coupon' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="复购与否" name="userName" rules={[{ required: true, message: '请输入复购与否' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                            </Row>

                        </Form>
                    </div>
                    <div className={styles.rightCenterForm}>
                        <Form
                            layout={'vertical'}
                            {...formItemLayout}
                            style={{ margin: '12px' }}
                        >
                            <Row align="middle">
                                <Col span={6} offset={2}>
                                    <FormItem label="收款公司" name="userName" rules={[{ required: true, message: '请输入收款公司' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="收款账号" name="userName" rules={[{ required: true, message: '请输入收款账号' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="VAT税号" name="userName" rules={[{ required: true, message: '请输入VAT税号' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </div>
                    <div className={styles.rightBottomForm}>
                        <Form
                            layout={'vertical'}
                            {...formItemLayout}
                            style={{ margin: '12px' }}
                        >
                            <Row align="middle">
                                <Col span={6} offset={2}>
                                    <FormItem label="发货仓库" name="userName" rules={[{ required: true, message: '请输入发货仓库' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="物流公司" name="userName" rules={[{ required: true, message: '请输入物流公司' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="发货方式及费用" name="userName" rules={[{ required: true, message: '请输入发货方式及费用' }]}>
                                        <Input placeholder="请输入" addonAfter={selectAfter} style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem label="物流追踪URL" name="userName" rules={[{ required: true, message: '请输入物流追踪URL' }]}>
                                        <Input placeholder="请输入" style={{ width: '80%' }}></Input>
                                    </FormItem>
                                </Col>
                                <Col span={6} offset={2}>
                                    <FormItem
                                        label="CMR文件"
                                        name="checkFileId"
                                        initialValue={[]}
                                        rules={[{ required: true, message: '请选择CMR文件！' }]}
                                    >
                                        <FileUpload ossEnum="PROJECT" multiple={true} max={6} type="image/*,.pdf,.doc,.docx" />
                                    </FormItem>
                                </Col>
                            </Row>

                        </Form>
                    </div>
                </div>
            </div>
        </div >
    );
};
export default AddOrder;